<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@ include file="../include/head.jsp" %>
<%@ include file="../include/top.jsp" %>
<%@ include file="../include/left.jsp" %>
<div class="main-content">

    <%@ include file="../include/navigate.jsp" %>
    <div class="container">
        <div class="widget-box">
            <div class="widget-box-header">
                <div class="col-sm-2">
                    <div class="title"><i class="icon-edit">&nbsp;</i>新建计划任务</div>
                </div>
            </div>
            <div class="widget-box-content" style="padding:15px;">
            <form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/user/add" method="post">
                <div class="form-group">
                    <label class="col-sm-2 control-label">etl作业:</label>
                    
                    <div class="col-sm-5">
        				<select id='etlId' class='form-control'>
        					<c:forEach items="${jobs}" var="job">
        						<option value="${job.xmlJobId}">${job.xmlJobName}</option>
        					</c:forEach>
        				</select>
                    </div>
                    
                    <div class="col-sm-2 control-label" id="etlId_tips" style="text-align:left;color:#D16E6C;" hidden="true" >请选择一个etl作业!</div>
                </div>
                
                
                <div class="form-group">
                    <label class="col-sm-2 control-label">任务名称:</label>

                    <div class="col-sm-5">
						<input id='jobName' type='text' class='input-mask-jobName' name='jobName' placeholder='请输入任务名称' style="width:100%;" data-toggle='tooltip' data-placement='left' required=''>
                    </div>
                    
                    <div class="col-sm-2 control-label" id="jobName_tips" style="text-align:left;color:#D16E6C;" hidden="true" >任务名称长度必须大于2!</div>

                </div>
                
                
                <div class="form-group">
                    <label class="col-sm-2 control-label">cron表达式:</label>

                    <div class="col-sm-5">
						<input id='cronExp' type='text' class='input-mask-cronExp' name='cronExp' style="width:100%;" placeholder='*  *  *  *  *' data-toggle='tooltip' data-placement='left' required=''>
                    </div>
                    
                    <div class="col-sm-2 control-label" id="cronExp_tips" style="text-align:left;color:#D16E6C;" hidden="true" >请填写正确的cron表达式!</div>

                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">描述:</label>

                    <div class="col-sm-5">
						<textarea id="des" class="autosize-transition form-control" style="overflow: hidden; word-wrap: break-word; resize: vertical;">${user.remark}</textarea>
                    </div>
                </div>
                
                <div class="form-group">
						<label class="col-sm-2 control-label"> 是否立刻启用: </label>
						<div class="col-sm-5 checkbox" style="margin-left:15px;">
							<input name="enabled" type="checkbox" id='startNow'>
						</div>
					</div>

                <div class="form-group">
                    <label class="col-sm-2 control-label"></label>

                    <div class="col-sm-2">
                        <button type="button" class="btn btn-success"  onclick="submitUserData()">提交</button>
                        <a type="button" class="btn btn-primary" href="${pageContext.request.contextPath}/cronJob/list"> 返回列表</a>
                    </div>

                </div>
                
            </form>
        </div>
    </div>
        <div style="position:fixed;bottom:0px; width:100%;" align="center">
            <%@ include file="../include/footer.jsp" %>
        </div>
</div>

<script type="text/javascript">
/*

字段名                 允许的值                        允许的特殊字符  
秒                     0-59                            , - * /  
分                     0-59                            , - * /  
小时                    0-23                           , - * /  
日                     1-31                            , - * ? / L W C  
月                     1-12 or JAN-DEC                 , - * /  
周几                   1-7 or SUN-SAT                   , - * ? / L C #  
年 (可选字段)           empty,1970-2099                 , - * /



“?”字符：表示不确定的值

“,”字符：指定数个值

“-”字符：指定一个值的范围

“/”字符：指定一个值的增加幅度。n/m表示从n开始，每次增加m

“L”字符：用在日表示一个月中的最后一天，用在周表示该月最后一个星期X

“W”字符：指定离给定日期最近的工作日(周一到周五)
 
“#”字符：表示该月第几个周X。6#3表示该月第3个周五

*/
function addInputMask(){
	$('.input-mask-jobName').inputmask('*{2,}', {
		onincomplete : function() {
			$('#jobName_tips').prop("hidden", false);
		},
		oncomplete : function() {
			$('#jobName_tips').prop("hidden", true);
		},
		clearMaskOnLostFocus: false,
		insertMode: true
	});
	
	Inputmask.extendDefinitions({
		'c': {
		    validator: "[0-9*/\,\-]", // 有效输入字符：0-9 * / , -
		    cardinality: 1,
		    casing: "upper" //auto uppercasing
		},
		'm': {      // 月份字段可接受字符
		    validator: "[0-9a-zA-Z*/\,\-]", // 有效输入字符：0-9 a-z A-Z * / , -
		    cardinality: 1,
		    casing: "upper" //auto uppercasing
		},
		'd': {      // day
		    validator: "[0-9*/?\,\-LWClwc]", // 有效输入字符：0-9 * / , - ? L W C l w c
		    cardinality: 1,
		    casing: "upper" //auto uppercasing
		},
		'w': {      // week
		    validator: "[1-7a-zA-Z*/?\,\-]", // 有效输入字符：1-7 * / , - 
		    cardinality: 1,
		    casing: "upper" //auto uppercasing
		}
	});
	
	$('.input-mask-cronExp').inputmask('c{1,} c{1,} c{1,} d{1,} m{1,} w{1,} c{0,}', {
		onincomplete : function() {
			$('#cronExp_tips').prop("hidden", false);
		},
		oncomplete : function() {
			$('#cronExp_tips').prop("hidden", true);
		},
		clearMaskOnLostFocus: false,
		insertMode: true
	});
}

addInputMask();
</script>

	<script type="text/javascript">
		$(document)
				.ready(
						function() {
							window.submitUserData = function(){
				        		var etlId = $("#etlId").val();
				        		var jobName = $("#jobName").val();
				        		var exp = $("#cronExp").val();
				        		var isStartNow = $("#startNow").prop("checked");
				        		var des = $("#des").val();
				        		
				        		if(etlId == "-1" || etlId == "0"){
				        			$('#etlId_tips').prop("hidden", false);
				        			return;
				        		}
				        		
				        		if (!$('.input-mask-jobName').inputmask("isComplete")){
									$('#jobName_tips').prop("hidden", false);
									return;
								}
				        		
				        		if (!$('.input-mask-cronExp').inputmask("isComplete")){
									$('#cronExp_tips').prop("hidden", false);
									return;
								}
				        		
				        		$.ajax({  
						        	type:'post',
						            url: '/cronJob/add',
						            data: {"jobNameDisplay": jobName, "cronExpression": exp, "etlXmlId": etlId, "enable": isStartNow, "des": des},  
						            cache:false,    
						            dataType:'json',    
						            success: function(data) {
						            	if(data != 'success'){
						            		window.location = "${pageContext.request.contextPath}/cronJob/list?error=" + encodeURIComponent(data);
						            	} else {
						            		window.location = "${pageContext.request.contextPath}/cronJob/list?msg=添加计划任务成功！";
						            	}
						            },    
						            error : function() {
						            	operationFailed();
						            }
						        });	
				        	}

						});
	</script>

<%@ include file="../include/bottom.jsp" %>